<script setup>
import { ref } from "vue"
import { getSideShowList, setSideShow, delSideShow } from '@/api/sideShow.js'
import { ElMessage } from 'element-plus';
const tableData = ref([])
const visible = ref(false)
const formData = ref({})

// 获取轮播图列表
const loadGetSideShowList = async () => {
	const res = await getSideShowList()
	tableData.value = res.records
}
loadGetSideShowList()


//编辑
const change = (row) => {
	formData.value = { ...row }
	visible.value = true
	console.log(formData.value)
}

// 提交
const onSubmit = async () => {
	await setSideShow(formData.value)
	loadGetSideShowList()
	visible.value = false
	formData.value = {}
}

//删除轮播图
const del = async (id) => {
	await delSideShow(id)
	ElMessage.success("删除成功")
	loadGetSideShowList()
}

</script>

<template>
	<el-card>
		<el-button type="primary" class="mb-15px" @click="visible = true; formData = {}">新增</el-button>
		<el-table :data="tableData" stripe border>
			<el-table-column prop="id" label="ID" />
			<el-table-column prop="url" label="图片路径">
				<template #default="{ row }">
					<img :src="row.url" style="width: 80px;height: 80px;">
				</template>
			</el-table-column>
			<el-table-column prop="isShow" label="状态">
				<template #default="{ row }">
					<el-tag>{{ row.isShow == 1 ? "上架" : "下架" }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" />
			<el-table-column label="操作">
				<template #default="{ row }">
					<el-button size="small" @click="change(row)" type="primary">
						编辑
					</el-button>
					<el-button size="small" type="danger" @click="del(row.id)">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
	<!-- 弹层 -->
	<Dialog title="新增轮播图" v-model:visible="visible" @onSubmit="onSubmit">
		<el-form label-position="left" label-width="auto" style="max-width: 600px">
			<el-form-item label="图片">
				<UpLoad v-model:images="formData.url"></UpLoad>
			</el-form-item>
			<el-form-item label="状态">
				<el-select class="w-50%" v-model="formData.isShow" placeholder="请选择">
					<el-option label="上架" :value="1" />
					<el-option label="下架" :value="2" />
				</el-select>
			</el-form-item>
		</el-form>
	</Dialog>
</template>

<style scoped lang="scss">
:deep(.el-table--border th.el-table__cell) {
	background-color: #f5f5f5;
	text-align: center;
}

:deep(.el-table td.el-table__cell div) {
	text-align: center;
}
</style>
